<template>
  <div class="mainList">
    <div class="searchMain">
      <div class="searchPos" :class="{'boxShow': searchHide}">
        <a-form ref="formSearchRef" :model="formSearch" v-if="columnsDistShow">
          <div class="form-main" :class="{'searchHide': searchHide}">
            <div class="form-item">
              <!-- <div class="searchTop-list tess">
                <a-select v-model="formSearch.keywords_type"
                      style="width:165px;"
                      :trigger-props='{trigger:"hover"}'
                      :bordered="false"
                      :options="keywordTypes"
                      default-value="keywords"
                      @change="(v)=>switchKeywordType(formSearch,v)">
                </a-select>
                <a-input v-model="formSearch[formSearch['keywords_type']??'keywords']" allow-clear placeholder="多个请用','割开"/>
              </div>
              <a-form-item :field="formSearch['keywords_type']" label="关键字" label-col-flex="90px" style="display: none;"></a-form-item> -->
              <a-form-item field="container_no" label="柜号" label-col-flex="90px" class="searchTop-list">
                <a-input v-model="formSearch.container_no" allow-clear placeholder="清输入柜号"/>
                </a-form-item>
             
                    
            </div>     
            <div class="form-buttom">
              <div>
                <a-button type="primary" html-type="submit" @click="submitSearch" style="margin-right: 10px;">
                  <template #icon>
                    <icon-search/>
                  </template>
                  搜索
                </a-button>
                <a-button @click="resetSearch">
                  <template #icon>
                    <icon-delete/>
                  </template>
                  重置
                </a-button>
              </div>      
              <a-space class="lg:mt-0 mt-2" style="margin-top: 20px;display: flex;justify-content: flex-end;margin-right: 10px">         
                  <a-tooltip content="显隐搜索"><a-button shape="circle" @click="searchHide=!searchHide"  style="margin-right: 10px"><icon-search/></a-button></a-tooltip>
                  <a-tooltip content="设置"><a-button shape="circle" @click="openSetting"><icon-settings/></a-button></a-tooltip>
                </a-space>                  
            </div>
          </div>
        
          <div class="touHide" style="display: flex;justify-content: center;margin-bottom: 10px;">  
            <a-link v-if="searchHide" @click="searchHide=!searchHide" size="small">
              {{ searchHide ? '收起':'' }}
              <template #icon>
                <icon-up v-if="searchHide" />
              </template>
            </a-link>
          </div>
          </a-form>
      </div>
    </div>
    <div class="ma-content-block justify-between p-4 mainTable">
          <!-- 操作按钮 -->
          <div class="top-button">
            <div>
                <a-button type="primary" @click="addAction()">
              <template #icon>
                <icon-plus/>
              </template>
              新增
            </a-button>
            </div>
        <a-space class="lg:mt-0 mt-2">         
          <a-tooltip content="显隐搜索"><a-button shape="circle" @click="searchHide=!searchHide" ><icon-search/></a-button></a-tooltip>
          <a-tooltip content="设置"><a-button shape="circle" @click="openSetting"><icon-settings/></a-button></a-tooltip>
        </a-space>
            
        </div>
        <!-- tab切换 -->
        <!-- <a-tabs class="ma-tabs mb-1 tabs" @change="clickTap" v-model:active-key="formSearch.status">         
          <a-tab-pane :key="item.key" :title="item.title" v-for="item in shipmentTabs">
            <template #title>
              <slot :name="'tabTitle-' + item.label">{{ item.title }}</slot>
            </template>
          </a-tab-pane>
      </a-tabs> -->
      <div ref="tablePrantRef">
      <a-table ref="tableRef" :sticky-header="true" :scrollbar="true" :stripe="true" :scroll="{ x: '100%', y: '100%' }"  :columns="localColumns(columnsData)" :data="dataList" class="table-list" 
    hide-expand-button-on-empty :loading="loading" row-key="id" v-model:selectedKeys="selected" @selection-change="setSelecteds($event)" stripe :row-selection="rowSelection"  column-resizable :pagination="false">
      <!--  列表插槽    -->


        
        <template #file="{ record }">
          <a-image v-if="record?.imgHref" :src="record.imgHref" width="80" />
        </template>

        <!-- <template #fixed="{ record }">
          <a-link  title="托盘接收" @click="editAction(record)"><icon-edit /></a-link>
          <a-popconfirm
                    content="确定要删除该数据吗?"
                    position="bottom"
                >
                <a-link title="删除"><icon-delete /></a-link>
          </a-popconfirm>
          </template> -->
      </a-table>
    </div>  
    <!-- 分页 -->
    <div class="foot-list">
      <a-pagination
          :total="pageInfo.total"
          show-total show-jumper show-page-size     
          v-model:current="formSearch.page"
          @change="pageChange"
          @page-size-change="pageSizeChange"
          :page-size-options="[10, 20, 30, 50, 100]"
          :page-size="formSearch.pageSize"
          style="display: inline-flex"
      />
    </div>
    <add-modal-form ref="addModalMormRef" @addClick="tableList" v-if="columnsDistShow"></add-modal-form>
    <setting ref="settingRef"></setting>
  </div>
</div>

</template>
<script setup>
import {ref, reactive, provide, computed, watch,onMounted,h} from 'vue'
import waybillTransport from '@/api/abroad/waybillTransport'
import AddModalForm from "@/views/abroad/waybillTransport/components/addModalForm.vue";
import {getDictData} from "@/utils/crud/dictNew.js";
import common from "@/api/common.js";
import dicthelpApi from "@/api/dicthelpApi.js";
import Setting from "@/views/components/setting.vue";
import {localColumns,tablePrantRefHeight} from "@/utils/crud/culmns.js";
import tool from '@/utils/tool'


const addModalMormRef = ref()
const selected=ref([])
const columnsDistShow=ref(false)
const shipmentTabs=ref([])//tabs赋值
const countList=ref({})
const tableRef = ref()
const tablePrantRef = ref() //tabel 父级高度
const dataList = ref([])
const loading=ref(false)
const settingRef = ref()
const columnsDist = ref([])
const formSearchRef=ref(null)

//搜索更多是否显示
const searchHide=ref(false)

// watch([shipmentTabs,countList],
// (newValues) => {
//   if(shipmentTabs.value!='' && countList.value!=''){
//       shipmentTabs.value.forEach(function(item) {
//             item.count = countList.value[item.key] ? countList.value[item.key] : 0
//       })   
//   }
//   }
// )
const columnsData = ref([  
{title: '柜号', dataIndex: 'container_no',width:100,hide:true,},
{title: '车牌号', dataIndex: 'car_number',width:100,hide:true,},
{title: '目的地', dataIndex: 'destination',width:100,align:'center',hide:true,},
{title: '可装托盘数', dataIndex: 'tray_count',width:100,align:'center',hide:true,},
{title: '预计送达时间', dataIndex: 'eta',width:150,align:'center',hide:true,},
{title: '送达时间', dataIndex: 'gta',width:150,align:'center',hide:true,},
]);


const openSetting=()=>{
  settingRef.value.open()
}
// //新增
const addAction=()=>{
  addModalMormRef.value.onShow()
}
//详情
const editAction=(record)=>{
  addModalMormRef.value.onShow(record)
}
//总页数
const pageInfo = ref({
  currentPage: 1,
  total: 0,
  totalPage:1
})
//table 选择
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});
//列表请求数据
const formSearch=reactive({
  container_no: '',
  page: 1,
  pageSize: 10,
  })
    //重置
  const resetSearch=(e)=>{
    formSearchRef.value.resetFields();
    console.log('formSearch',formSearch)
    tableList()
  }
 //搜索 
 const submitSearch=(e)=>{
  formSearch.page=1
  formSearch.refresh_tabs=1
  searchHide.value=false
  tableList()
}
  //切换分页
const pageChange=(e)=>{
  if(e){
   formSearch.page=e
    tableList()
  }
}
  //切换条数
const pageSizeChange=(e)=>{
  if(e){
  tool.local.set('pageSize', e)
   formSearch.pageSize=e
    tableList()
  }
}
//行数选中
const setSelecteds = (key) => {
  selected.value = key
}
//tabs切换
const clickTap=(e)=>{
  formSearch.page=1
  formSearch.status=e
  formSearch.refresh_tabs=0
    tableList()
}
    //列表
    const tableList = () => {
      loading.value=true
      formSearch.pageSize=tool.local.get('pageSize') || 10
      waybillTransport.getList(formSearch).then(res => {  
        dataList.value=res.data.items
        //页数
        pageInfo.value = res.data.pageInfo
        selected.value=[]
        loading.value=false
        tablePrantRefHeight(tablePrantRef.value)
      })      
    }
  
    onMounted(() => {
      tableList()
    })
const keywordTypes = [
  //  转单号   供应商单号
  {value: 'keywords', label: '单号'},
  // {value: 'public_number', label: '系统提单号'},
  {value: 'shipment_no', label: '运单号'},
  {value: 'outer_carrier_tracking_number', label: '转单号',index:'快递单号'},
  {value: 'ext_number', label: '扩展单号'},
  // {value: 'number', label: '客户单号'},
]
const switchKeywordType = (form,value)=>{
  keywordTypes.map(i=>{
    if(form[i.value] && i.value !== value){
      form[value] = form[i.value]
      form[i.value] = undefined
    }
  })
}
//字典
const waybillColumns= async () => {
  let attrDict=['waybill_sea_tray_status']
  let [dictObj,dicthelpApi_depot,dicthelpApi_supplier,dicthelpApi_waybillServiceTypeList,dicthelpApi_place,dicthelpApi_addressChang]=await Promise.all([
    common.getDicts(attrDict),dicthelpApi.depot({sea:1}),
        dicthelpApi.supplier({type:['5']}),dicthelpApi.waybillServiceTypeList(), dicthelpApi.place(), dicthelpApi.addressChang(0)
    ])
  return reactive({
        dictObj,
        // dicthelpApi_depot,
        // dicthelpApi_supplier,
        // dicthelpApi_waybillServiceTypeList,
        // dicthelpApi_place,
        dicthelpApi_addressChang
    })
}

waybillColumns().then(res=>{
  console.log('jjjjjjjjjjjj',res)
  columnsDist.value=res
  columnsDistShow.value=true
  // let parcelType=res.dictObj.data.waybill_sea_tray_status
  // if(parcelType){
  //   let obj={
  //     id:'',
  //     title:'全部',
  //     key:'',
  //   }    
  //   parcelType.push(obj)
  //   shipmentTabs.value=parcelType
  // }
})
provide('tableList',tableList);
provide('getDictData',getDictData)
provide('columnsData', columnsData)
provide('columnsDist', columnsDist)//全部字典
provide('dataList', dataList)
provide('formSearch', formSearch)
provide('selected', selected)
</script>
<script> export default {name: 'sea:waybillTransport'} </script>
<style>
.form-inline-card > .arco-card-body {
  padding: 0;
  display: grid;
  grid: 1fr / 1fr 1fr 1fr;
}

.form-inline-card > .arco-card-header {
  display: none;
}

.fee-up {
  border-bottom: dashed #777777 1px;
}

.fee-down {
  color: orange;
}
.customer-input-item .arco-btn-group button:first-child{
  display:none;
}

.table-list{
  margin-top:5px;
}
.arco-tabs-content{
  padding:0;
}
.foot-list{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mainTable{
  padding-top: 68px;
}
.arco-select-view-inner{
  white-space: nowrap;
}
.arco-select-view-inner .arco-tag{
  white-space: nowrap !important;
}
.tabs .arco-tabs-tab{
  min-width: 70px;
  justify-content: center;
}
</style>